<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" class="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>南航统一收银台</title>
    <script src="asserts/js/jquery-3.6.0.js"></script>
    <script src="asserts/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.4.1-dist/css/bootstrap-theme.css"/>
    <link rel="stylesheet" type="text/css" href="asserts/css/cloud.css"/>

    <style>

        .trs {
            border-radius: 7px;
            margin-top: 10px;
            background: rgba(255, 255, 255, 0.8);
            padding-bottom: 10px;
            padding-top: 10px;
            height: 90px;
            margin-left: -10px;
            margin-right: -10px;
        }

        .zfb {

            border: 2px solid #adadad59;
            width: 250px;
            height: 60px;
            line-height: 56px;
            text-align: center;
            border-radius: 5px;
            margin: 20px;
        }

        .zfb:hover {
            background: rgba(255, 255, 255, 0.38);
        }

        .navbar-default {
            background-color: #ffffffcf;;
            border-color: #e7e7e7;
        }

        .navbar-default {
            background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 100%);
            background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.45)), to(rgba(255, 255, 255, 0.45)));
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
            background-repeat: repeat-x;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            border-radius: 0px;
            -webkit-box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 5px rgb(0 0 0 / 8%);
            box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 5px rgb(0 0 0 / 8%);
        }

        .card1 {
            background-color: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(13px);
            -webkit-backdrop-filter: blur(13px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
            border-radius: 7px;
            -webkit-border-radius: 7px;
            color: rgb(255, 255, 255);
            width: 900px;
            margin: 0 auto;
        }

        #wai {
            text-align: center;
        }

        #card2 {
            background-color: rgba(245, 245, 245, 0.58);
            /* backdrop-filter: blur(13px); */
            -webkit-backdrop-filter: blur(13px);
            /* border: 1px solid rgba(255, 255, 255, 0.18); */
            /* box-shadow: rgb(142 142 142 / 19%) 0px 6px 15px 0px; */
            /* -webkit-box-shadow: rgb(142 142 142 / 19%) 0px 6px 15px 0px; */
            border-radius: 5px;
            /* -webkit-border-radius: 7px; */
            /* color: rgb(255, 255, 255); */
            margin: 20px;
            height: 110px;
            text-align: left;
        }


        .zls-flg-dir {
            border-bottom: 2px solid #bcc9d7;
            height: 4px;
            position: relative;
            margin-top: 0px;
        }

        .zls-flg-dir i {
            position: absolute;
            right: -3px;
            top: -2px;
            width: 0;
            height: 0;
            border-left: 12px solid #bcc9d7;
            border-top: 6px solid transparent;
        }

        .ll {
            padding-left: 25px;
        }

        .zz {
            text-align: center;
        }

        .jian {
            padding: 0 10px;
        }

        .time {
            margin-top: 24px;
            margin-bottom: 0px;
        }

        .fr {
            font-size: 16px;
            margin-bottom: 0px;
            margin-top: 12px;
        }

        .dd {
            font-size: 25px;
            margin-top: 5px;
        }

        .kk {
            font-size: 16px;
            margin-bottom: 0px;
            margin-top: 19px;
        }

        .zhl {
            font-size: 10px;
        }
    </style>
</head>

<body id="bodyy">

<!--背景-->
<div>
    <div class="frame">
        <div class="plane-container">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                 y="0px"
                 width="1131.53px" height="379.304px" viewBox="0 0 1131.53 379.304"
                 enable-background="new 0 0 1131.53 379.304"
                 xml:space="preserve" class="plane">
                    <polygon fill="#D8D8D8"
                             points="72.008,0 274.113,140.173 274.113,301.804 390.796,221.102 601.682,367.302 1131.53,0.223  "/>
                <polygon fill="#C4C4C3" points="1131.53,0.223 274.113,140.173 274.113,301.804 390.796,221.102   "/>
            </svg>

        </div>
    </div>
    <div class="clouds">

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud big front slowest">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud distant smaller">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud small slow">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud distant super-slow massive">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="762px"
             height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve"
             class="cloud slower">
            <path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
            c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
            C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
            S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
        </svg>

    </div>

</div>

<!--导航栏-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img id="logoo" style="margin-left: 30px;height: 30px;width: auto;margin-top: 10px;" src="asserts/img/logo.png"/>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a style="margin-left: 40px;box-shadow: 0 3px 9px rgb(0 0 0 / 8%);    background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);" href="#">购票<span class="sr-only">(current)</span></a></li>
                <li><a href="return.html">购票记录</a></li>

            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a id="weather" href="#">天气</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false" id="namee">{用户名}<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人信息</a></li>
                        <li><a id="signOutBtn" class="nav-link"  href="#">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>


<div id="wai" style="
display: flex;
display: -webkit-flex;
/* 从左端开始沿水平轴防止flex item */
flex-direction: row;
/* 强制 flex item不换行，沿着同一行堆叠 */
flex-wrap: nowrap;
/* flex item在主轴上的对齐方式，这里定义左对齐 */
justify-content: flex-start;
/* 定义交叉轴对其方式 */
align-items: flex-start">

    <div id="card1" class="card1" style="width: 300px;margin-right: 0px;text-align: center">


            <div style="margin-top: 31px;">
                <img id="ztimg" src="asserts/img/duihao.png" style="width: 45px;height: 45px;">
            </div>

            <div style="margin-top: 20px;margin-bottom: 20px;">
                <b id="title" style="color: #000; font-size: 15px;">加载中，请稍等。</b>
                <p></p>
<!--                <b style="color: #000; font-size: 15px;">金额：</b><b id="cost" style="color: #f5590a;font-size: 20px">加载中</b>-->
            </div>

    </div>


    <div id="card2" class="card1"
         style="height: auto;color: #000;width: 800px;margin-top: 0px;margin-left: 20px;margin-right: 0px;">


        <div style="margin: 20px;">


            <div class="row">
                <div class="col-md-2 ll" style="font-size: 15px;">航班信息</div>
                <div class="col-md-2 md rr" style="font-size: 15px;">起飞时间</div>
                <div class="col-md-2 md" style="font-size: 15px;"></div>
                <div class="col-md-2 md" style="font-size: 15px;">到达时间</div>
                <div class="col-md-2 cnm" style="font-size: 15px;">金额</div>
                <div class="col-md-2 md" style="font-size: 15px;">舱位</div>
            </div>
            <div id="trbody">
<!--                <div class="row trs">-->
<!--                    <div class="col-md-2 ll">-->
<!--                        <p style="font-size: 16px;margin-bottom: 0px;margin-top: 12px;">CZ2302</p>-->
<!--                        <p style="font-size: 10px;">A320</p>-->
<!--                    </div>-->
<!--                    <div class="col-md-2 md rr">-->
<!--                        <b style="font-size: 25px;margin-top: 5px;">08:35</b>-->
<!--                        <p>沈阳桃仙国际机场</p>-->
<!--                    </div>-->
<!--                    <div class="col-md-2 md zz">-->
<!--                        <p class="time">12h 23min</p>-->
<!--                        <div class="jian">-->
<!--                            <div class="zls-flg-dir"><i></i></div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="col-md-2 md">-->
<!--                        <b style="font-size: 25px;margin-top: 5px;">14:00</b>-->
<!--                        <p>成都天府国际机场</p>-->
<!--                    </div>-->
<!--                    <div class="col-md-2 cnm">-->
<!--                        <p style="font-size: 16px;margin-bottom: 0px;margin-top: 19px;">$1234</p>-->
<!--                    </div>-->
<!--                    <div class="col-md-2 md">-->
<!--                        <p style="font-size: 16px;margin-bottom: 0px;margin-top: 19px;">$1234</p>-->
<!--                    </div>-->
<!--                </div>-->


            </div>

        </div>

    </div>

    <div id="card3" class="card1" style="height: auto;width: 300px;margin-left: 20px;">

<!--        <div class="row" style="color: #000;margin-top: 15px;">-->
<!--            <div class="col-md-5 md " style="margin-left: 10px">-->
<!--                <b id="rqft" style="font-size: 25px;margin-top: 5px;">00:00</b>-->
<!--                <p id="rqfj">未选择</p>-->
<!--            </div>-->
<!--            <div class="col-md-1 md zz">-->
<!--                <p style="margin-top: 20px"><font face="verdana">-></font></p>-->
<!--            </div>-->
<!--            <div class="col-md-5 md" style="margin-right: -10px">-->
<!--                <b id="rjlt" style="font-size: 25px;margin-top: 5px;">00:00</b>-->
<!--                <p id="rjlj">未选择</p>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div style="text-align: center">-->
<!--            <br>-->
<!--            <p style="margin-left: 10px;color: #000;font-size: 15px;" id="rrTime">未选择</p>-->
<!--        </div>-->

<!--        <div>-->
<!--            <form style="color: #000;margin-top: 25px;text-align: center;margin-left: 10px;margin-right: 10px">-->

<!--                <div class="radio">-->
<!--                    <label style="text-align: left;">-->
<!--                        <input type="radio" name="cang" id="optionsRadios1" value="1" checked>-->
<!--                        <div id="toudeng">头等舱</div>-->
<!--                    </label>-->
<!--                </div>-->
<!--                <div class="radio">-->
<!--                    <label style="text-align: left;">-->
<!--                        <input type="radio" name="cang" id="optionsRadios2" value="2">-->
<!--                        <div id="jingji">经济舱</div>-->
<!--                    </label>-->
<!--                </div>-->

<!--                <div>-->
<!--                    <center>-->
<!--                        <button id="tt" class="button"-->
<!--                                style="vertical-align:middle;margin-top: 13px;margin-bottom: 20px" type="button">确定-->
<!--                        </button>-->
<!--                    </center>-->
<!--                </div>-->
<!--            </form>-->
<!--        </div>-->
    </div>


</div>

<script>

    var flag = getQueryVariable("orderId");

    $(document).ready(function () {

        $.ajax({
            url: "/getName",
            type: "get",
            dataType: "json",
            success: function (data) {
                if (data.success){
                    loginFlag=1;
                    $("#namee").text(data.data);
                }else{
                    $("#namee").text("未登录");
                    location.href="login.html";
                }
            }
        })


        var pathName=window.document.location.pathname;
        var curWwwPath=window.document.location.href;
        var pos=curWwwPath.indexOf(pathName);
        var prefixUrl=curWwwPath.substring(0,pos);
        console.log("prefixUrl:"+prefixUrl);

        var orderId=getQueryVariable("orderId");
        console.log(flag);
        if(flag==null ||flag === ""){
            $("#ztimg").attr("src","asserts/img/wrong.png");
            $("#title").text("支付失败");
            $("#bodyy").attr("style","background-color:#f49867;")
            $("#logoo").attr("src","asserts/img/logo_w.png");
            $("#zfb").attr("style","pointer-events: none");
        }else{
            $("#title").text("支付成功");
            // $("#cost").text("￥ "+data.data.cost+".0");
            // $("#orderId").val(data.data.id);
            $("#zfb").attr("style","pointer-events: auto");
            // $("#userId").val(data.data.userId);
        }

        $.ajax({
            url: prefixUrl+"/getOrderList",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log("登录返回信息为：");
                console.log(data);
                Alldata = data;
                createEmpInfoTable(data.data);
            }
        });

        function createEmpInfoTable(data) {

            for (var i = 0; i < data.length; i++) {
                var HangBanXinXi = data[i].flight.name;
                var FeiJiXingHao = data[i].flight.aircrafts.model;
                var JiangLuoRiQi = data[i].flight.landingTime;

                var jjcj = data[i].cang;
                var tdcj = data[i].cost;

                var QiFeiRiQi = data[i].flight.takeOffTime;
                var JiangLuoJiChang = data[i].flight.landingAirportE.airportName;
                var QiFeiJiChang = data[i].flight.takeOffAirportE.airportName;
                var jt = JiangLuoRiQi.substring(14);
                var qt = QiFeiRiQi.substring(14);
                var qqfftt = new Date(JiangLuoRiQi);
                var jjlltt = new Date(JiangLuoRiQi);
                var ahdbfh = jjlltt = qqfftt;
                var leave1 = ahdbfh % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                var hours = Math.floor(leave1 / (3600 * 1000))
                var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
                var minutes = Math.floor(leave2 / (60 * 1000))

                var row = $("<div></div>").addClass("row trs").attr("onclick", "choose(" + i + "," + hours + "," + minutes + ")");

                var hbh = $("<p></p>").text(HangBanXinXi).addClass("fr");
                var xh = $("<p></p>").text(FeiJiXingHao).addClass("zhl");
                var ll = $("<div></div>").append(hbh).append(xh).addClass("col-md-2 ll");

                var qft = $("<b></b>").text(qt).addClass("dd");
                var qj = $("<p></p>").text(QiFeiJiChang);
                var rr = $("<div></div>").append(qft).append(qj).addClass("col-md-2 md rr");

                var jiange = $("<p></p>").text(hours + "h " + minutes + "m").addClass("time");
                var ii = $("<i></i>");
                var aa = $("<div></div>").addClass("zls-flg-dir").append(ii);
                var jian = $("<div></div>").addClass("jian").append(aa);
                var zz = $("<div></div>").addClass("col-md-2 md zz").append(jiange).append(jian);


                var jlt = $("<b></b>").text(jt).addClass("dd");
                var jj = $("<p></p>").text(JiangLuoJiChang);
                var bb = $("<div></div>").append(jlt).append(jj).addClass("col-md-2 md");

                var pcnm = $("<p></p>").addClass("kk").text("￥" + tdcj);
                var cnm = $("<div></div>").append(pcnm).addClass("col-md-2 cnm");

                var jjc = $("<p></p>").addClass("kk").text(jjcj ===1?"头等舱":"经济舱");
                var zxc = $("<div></div>").append(jjc).addClass("col-md-2 md");

                row.append(ll).append(rr).append(zz).append(bb).append(bb).append(cnm).append(zxc);

                $("#trbody").append(row)
            }
        }


        $("#signOutBtn").click(function () {
            signOut();
            return;//终止a标签默认行为
        });

        function signOut() {
            $.ajax({
                url:prefixUrl+"/signOut",
                type: "POST",
                success:function (data) {
                    location.href="login.html";
                }
            })
        }

    })

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }
</script>

</body>

</html>